﻿@model IEnumerable<QuanLyGiaoVuUI.Models.LopMonHoc.DeTaiViewModel>

@{
    Layout = "~/Views/Shared/_blueWhaleLayout.cshtml";
}

@{Html.RenderPartial("LopMonHocMenuPartial");}

<div id="main" class="grid_10">
    <!--  start page-heading -->

    <div id="page-heading" class="box round first grid">
        <h2>Danh sách đề tài khóa luận tốt nghiệp</h2>
        <!-- end page-heading -->
        <div class="block">
            <table class="data display datatable">
                <tr>
                    <th></th>
                    <th>
                        Tên đề tài
                    </th>
                    <th>Giảng viên hướng dẫn 1
                    </th>
                    <th>
                        Giảng viên hướng dẫn 2
                    </th>
                    <th>Tùy chọn
                    </th>
                </tr>
                @{int count = 0;}
                @foreach (var item in Model)
                {
                    <tr class="gradeA @(++count % 2 == 0 ? "even" : "odd")">
                        <td>
                            <input type="checkbox" value="@item.MaDeTai" />
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TenDeTai)
                        </td>
                        <td>
                            @item.GiangVien1.GetTenVaHocVi()
                        </td>
                        <td>
                            @item.GiangVien2.GetTenVaHocVi()
                        </td>
                        <td style="text-align:center">
                            <a href="#" onclick="XemDeTai('@item.MaDeTai')">Xem</a>
                            @if (!item.DaDuyet)
                            {
                            <span>|</span>
                            <a href="#" onclick="XacNhanDeTai('@item.MaDeTai',true,'@item.TenDeTai')">Xác nhận</a>
                            <span> | </span>
                            <a href="#" onclick="XacNhanDeTai('@item.MaDeTai',false)">Hủy</a>
                            }
                        </td>
                    </tr>
                }

            </table>
        </div>
    </div>
</div>
<div id="xemDeTaiDialog"></div>
<div id="huyDeTaiDialog"></div>
<script>
    function XemDeTai(maDeTai) {
        $('#xemDeTaiDialog').load('/LopMonHoc/ChiTietDetai?maDeTai=' + maDeTai, function () {
            $('#xemDeTaiDialog').dialog({
                autoOpen: 'true',
                width: 400,
                title: "Xem đề tài",
                height: 'auto',
                buttons: {
                    "Đóng": function () {
                        $("#xemDeTaiDialog").dialog("close");
                    }
                }
            });
        });
    }

    function XacNhanDeTai(maDeTai,datYeuCau,tenDeTai) {
        if (datYeuCau == true) {
            if (confirm("Duyệt đề tài " + tenDeTai + "?")) {
                $.ajax({
                    type: "POST",
                    url: "/LopMonHoc/XacNhanDeTai",
                    data: {
                        maDeTai: maDeTai,
                        datYeuCau: datYeuCau
                    },
                    success: function (data) {
                        if (data.success) {
                            ToastManager.showSuccessToast("Xác nhận thành công.");
                        }
                        else
                            ToastManager.showStickyWarningToast(data.message);
                    }
                });
            }
        }
        else {
            $('#huyDeTaiDialog').load('/LopMonHoc/HuyDeTai?maDeTai=' + maDeTai, function () {
                $('#huyDeTaiDialog').dialog({
                    autoOpen: 'true',
                    width: 400,
                    title: "Hủy đề tài",
                    height: 'auto',
                    buttons: {
                        "Xác nhận": function(){
                            $("#btnSubmitHuyDeTai").click();
                        },
                        "Đóng": function () {
                            $("#huyDeTaiDialog").dialog("close");
                        }
                    }
                });
            });
        }
    }

    function CloseDialog(id) {
        $(id).dialog("close");
    }
</script>